<template>
  <div class="container">
    <star-nav-bar :title="title" :rightText="text" @address-handle="deleteHandle" />
    <div class="form" v-if="!mapVisible">
      <div class="btn">
        <van-button @click="mapVisible = true">选择收货地址 <van-icon name="arrow" /></van-button>
      </div>
      <van-cell-group inset class="info">
        <van-field v-model="addressFormData.detail" label="地址" />
        <van-field v-model="addressFormData.floor" label="门牌号" placeholder="例1号楼101室" />
        <van-field v-model="addressFormData.consignee" label="联系人" placeholder="请填写收货人的姓名">
          <template #extra>
            <div class="sex">
              <label>
                <input type="radio" v-model="addressFormData.sex" value="1" />
                先生
              </label>
              <label>
                <input type="radio" v-model="addressFormData.sex" value="0" />
                女士
              </label>
            </div>
          </template>
        </van-field>
        <van-field v-model="addressFormData.phone" type="tel" label="手机号" placeholder="请填写收货人的手机号码" />
      </van-cell-group>
      <div class="btn save">
        <van-button type="primary" @click="saveHandle">保存地址</van-button>
      </div>
    </div>
    <div class="map-content" v-else>
      <my-map :detail="addressFormData.detail || ''" @select="addressHandle" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { addAddressAPI, deleteAddressAPI, getAddressDetailAPI, putAddressDetailAPI } from '@/api/address'
import { useRoute, useRouter } from 'vue-router'
import MyMap from './components/map.vue'
const route = useRoute()
const router = useRouter()
const title = ref<'新增收货地址' | '编辑收货地址'>('新增收货地址')
const text = ref('')
// 地图显示
const mapVisible = ref(false)
const init = () => {
  if (route.query.id) {
    title.value = '编辑收货地址'
    text.value = '删除'
    getAddressDetail(+route.query.id)
  }
}
interface AddressFormData {
  consignee: string
  phone: string
  sex: string
  detail: string
  floor: string
}
const addressFormData = ref({} as AddressFormData)
// 获取地址详情
const getAddressDetail = async (id: number) => {
  try {
    const { data } = await getAddressDetailAPI(id)
    addressFormData.value = data
  } catch (error) {
    console.log(error)
  }
}
export interface AddressData {
  adcode: string
  //城市
  city: string
  //城市编码
  citycode: string
  //曲县
  district: string
  //省份
  province: string
  //街道
  street: string
}
const city = localStorage.getItem('city')

// 选择地址
const addressHandle = (value: string) => {
  mapVisible.value = false
  addressFormData.value.detail = value
  // console.log(addressFormData.value.detail)
}
// 更新地址
const updateAddress = async (id: number) => {
  const params = {
    id: id,
    consignee: addressFormData.value.consignee,
    sex: addressFormData.value.sex,
    phone: addressFormData.value.phone,
    detail: city + addressFormData.value.detail,
    floor: addressFormData.value.floor,
  }
  try {
    await putAddressDetailAPI(params)
  } catch (error) {
    console.log(error)
  }
}
// 保存地址
const saveHandle = async () => {
  const params = {
    consignee: addressFormData.value.consignee,
    sex: addressFormData.value.sex,
    phone: addressFormData.value.phone,
    detail: city + addressFormData.value.detail,
    floor: addressFormData.value.floor,
  }
  try {
    if (route.query.id) {
      await updateAddress(+route.query.id)
    } else {
      await addAddressAPI(params)
    }
    router.back()
  } catch (error) {
    console.log(error)
  }
}
// 删除地址
const deleteHandle = async () => {
  if (!route.query.id) return
  try {
    await deleteAddressAPI(+route.query.id)
    router.back()
  } catch (error) {
    console.log(error)
  }
}

onMounted(() => {
  init()
})
</script>
<style scoped lang="scss">
:deep() {
  .van-field__label {
    width: 60px;
  }
}

.van-button {
  width: 100%;
  height: 40px;
}

.van-radio-group {
  width: 100px;
}

.form {
  margin: 10px 10px;
  flex-grow: 1;
  background: #fff;
  border-radius: 10px;
}

.btn {
  padding: 10px;
}

.sex {
  font-size: 14px;
  display: flex;

  label {
    display: flex;
    align-items: center;

    input {
      height: 20px;
    }
  }
}

.map-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>
